<template>
    <div class="page has-navbar">
        <div class="page-content imagelist" >
            <von-header>
                <button class="button button-icon ion-ios-arrow-back" slot="left" @click="$router.back('/home')"></button>
                <span slot="title">{{message.name}}</span>
            </von-header>
            <div class="il-content"  v-if="!show">
                <img :src="'http://dn-toursforfun.qbox.me/images/' + message.picture + '?imageView2/1/w/1080/h/606/q/90/format/jpg'">
                <six-first :products_info="products_info"></six-first>
            </div>
            <loading v-if="show"></loading>
        </div>
    </div>
</template>

<script>
    import Loading from '../components/loading'
    import SixFirst from '../components/sixfirst.vue'
    export default{
        components:{Loading,SixFirst},
        data() {
            return {
                id:this.$route.params.id,
                message:{},
                products_info:[],
                show:false
            }
        },
        created(){
            this.show=true
            this.axios.get('https://app.toursforfun.com/config/banner/'+this.id+'/products')
                .then(data=>{
                    this.show=false
                    this.message=data.data.data
                    console.log(this.message)
                    this.products_info=this.message.products_info
                    $('.page-content.imagelist').css('background',this.message.background)

                })
                .catch(err=>{
                    console.log(err)
                })
        },
    }
</script>
<style>
    .imagelist .bar.bar-header{
        box-shadow: none;
    }
    .imagelist .button.button-icon.ion-ios-arrow-back{
        color: #363636;
    }
    .il-content>img{
        width:100%;
        display: block;
    }
</style>